<template>
    <div class="home" ref="box">
        <NavBar fixed location actived :isTop="isTop"/>
        <div class="header">
            <swiper
            :loop="true"
            :autoplay="true"
            class="home-swiper"
            :slides-per-view="1"
            >
                 <swiper-slide v-for="i in 3"><img src="@/assets/swiper.jpg" class="item"></swiper-slide>
            </swiper>
            <div class="category" ref="category">
                <div class="item"><img src="@/assets/homeico1.png" alt="">实时直播</div>
                <div class="item"><img src="@/assets/homeico2.png" alt="">畅销商品</div>
                <div class="item"><img src="@/assets/homeico3.png" alt="">达人分析</div>
                <div class="item"><img src="@/assets/homeico4.png" alt="">热门视频</div>
                <div class="item"><img src="@/assets/homeico5.png" alt="">星图达人</div>                                        
            </div>
        </div>
        <HomeTitle white><template #default>热榜直播</template></HomeTitle>
        <div class="hotlive">
            <swiper
            class="list"
            :slides-per-view="3.2"
            :space-between="10"
            >
                <swiper-slide v-for="i in 6">
                <div class="item">
                <div class="cover">
                <img src="@/assets/zhibo1.jpg" class="cover">
                <div class="tag">
                直播中
                </div>
                </div>
                <div class="info">
                    <div class="scale">销售量</div>
                    <div class="avatar"><img src="@/assets/toximg.png" /></div>
                    <div class="scale">210.9W</div>
                </div>
                </div>
                </swiper-slide>
            </swiper>    
        </div>
        <div class="brand"><img src="@/assets/bgdaili.png"/></div>
        <HomeTitle><template #default>热门达人</template></HomeTitle>
        <div class="hotpeople">
          <div class="list">
            <div class="item" v-for="i in 2">
               <div class="no">{{ `NO${i}` }}</div>
               <div class="avatar"><img src="@/assets/toximg.png"/></div>
               <div class="info">
                  <div class="name">END<div class="tag">科技</div></div>
                  <div class="dsc">
                     <div class="t">
                       <div class="o">265.5w</div>
                       <div class="n">粉丝数</div>
                     </div>
                     <div class="t">
                       <div class="o">212.1w</div>
                       <div class="n">点赞数</div>
                     </div>
                     <div class="t">
                       <div class="o">231w</div>
                       <div class="n">视频数</div>
                     </div>                                          
                  </div>
               </div>
            </div>
          </div>
        </div>
        <HomeTitle><template #default>热门视频</template></HomeTitle>
        <div class="hotvideo">
            <swiper
            class="list"
            :slides-per-view="2.3"
            :space-between="10"
            >
                <swiper-slide v-for="i in 6">
                <div class="item">
                    <div class="cover">
                        <img src="@/assets/video.png" class="cover">
                        <div class="time">2天前</div>
                        <div class="tag"><img src="@/assets/love.png">180.1w</div>
                    </div>
                </div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount, onDeactivated } from 'vue'
import SwiperCore, { Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.scss'
import HomeTitle from '../components/title.vue'
SwiperCore.use([Autoplay])

const box = ref(null)
const category = ref(null)
const isTop = ref(false)
onMounted(() => {
    const Top = category.value.offsetTop
    box.value.addEventListener('scroll', (e) => {
        const scrollTop = e.target.scrollTop
        isTop.value = scrollTop >= Top
    })  
})

onBeforeUnmount(() => {
    isTop.value = false
    box.value.removeEventListener('scroll', () => {})
})


</script>

<style lang="scss" scoped>
.home {
    background-color:#2D3856;
    .header {
        position: relative;
        margin-bottom: 35px;
        .home-swiper {
            height:220px;
            .item {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
        .category {
            z-index: 99;
            display: flex;
            position: absolute;
            padding-top: 5px;
            bottom: 0;
            left: 15px;
            right: 15px;
            background-color:#2D3856;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            .item {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: white;
                font-size: 12px;
                img {
                    width: 40px;
                    height: 40px;
                    display: block;
                    margin-bottom:3px;
                }
            }
        }
    }
    .hotlive {
        margin-top: 15px;
        .list {
            padding: 0 15px;
            .item {
                background-color: white;
                border-radius: 5px;
                overflow: hidden;
                .cover {
                    position: relative;
                    img {
                        display: block;
                        width: 100%;                         
                    }
                    .tag {
                        position: absolute;
                        top: 5px;
                        right: 5px;
                        font-size: 12px;
                        color:white;
                        padding:2px 4px 2px 13px;
                        background: url(../../assets/live.png) no-repeat 3px center/8px 8px #FB3939;
                    } 
                }
                .info {
                    padding: 3px 3px;
                    font-size: 12px;
                    display: flex;
                    justify-content: space-between;
                    position: relative;
                    .avatar {
                        position: absolute;
                        top: 0;
                        left: 50%;
                        width: 20px;
                        height: 20px;
                        transform:translate(-50%, -50%);
                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                    .scale {
                        transform: scale(.799999)
                    }
                }
            }
        }
    }
    .brand {
        margin: 13px 30px 16px;
        img {
            width: 100%;
            display: block;
        }
    }
    .hotpeople {
        margin: 17px 0;
        .list {
            .item {
                display: flex;
                background-color: white;
                margin:0 30px;
                border-radius: 5px;
                oveflow:hidden;
                padding: 10px 5px;
                &:not(:last-of-type) {
                    margin-bottom: 5px;
                }
                .no {
                    font-size: 12px;
                }
                .avatar {
                    margin: 0 4px;
                }
                &:nth-of-type(1) {
                    .no {
                        color: #F59A11
                    }
                }
                &:nth-of-type(2) {
                    .no {
                        color: #65DB0B
                    }
                }
                .info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    color: #333;
                    .name {
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        .tag {
                            margin-left: 5px;
                            font-size: 12px;
                            background-color: #43C2FE;
                            color: white;
                            padding: 2px 4px;
                            transform: scale(.8)
                            
                        }
                    }
                    .dsc {
                        font-size: 12px;
                        display: flex;
                        margin-top: 3px;
                        .t {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            &:not(:last-of-type) {
                                margin-right: 47px;
                            }
                            .n {
                                transform: scale(.9)
                            }
                        }
                    }
                }
            }
        }
    }
    .hotvideo {
        margin: 17px 0;
        .list {
            padding: 0 15px;
            .item {
                .cover {
                    border-radius: 5px;
                    overflow: hidden;
                    img {
                        width: 100%;
                        display: block;
                    }
                    & > div {
                        position: absolute;
                        z-index: 99;
                        font-size: 12px;
                        color: white;
                        transform: scale(.7);
                        &.time {
                            top: 4px;
                            left: 10px;
                            background-color: #9a9a9a;
                            padding: 3px 5px;
                            border-radius: 5px;
                        }
                        &.tag {
                            bottom: 10px;
                            right: 5px;
                            display: flex;
                            align-items: center;
                            img {
                                display: block;
                                width: 10px;
                                height: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>